<!-- DateTimeSelect.vue 
<DateTimeSelect v-model="formData.operateDate" label="出入库时间" prop="operateDate"
  :readonly="!this.editMode" type="datetime" /> 

  注意该控件传入v-model 可以是date, string,但是一旦选择后就变更为了 string
  使用该控件时，尽量使用字符串
-->

<template>
  <el-form-item :label="label" :prop="prop" :rules="!readonly ? rules : null"
    :class="{ 'readonly-form-item': readonly }">
    <!-- 只读状态显示 -->
    <span v-if="readonly" class="readonly-content">
      {{ displayValue || '-' }}
    </span>

    <!-- 可编辑状态显示 -->
    <el-date-picker v-else v-model="selectedValue" :type="datePickerType" :placeholder="placeholder"
      :disabled="disabled" :clearable="clearable" :style="{ width: width }" :format="dateFormat"
      :value-format="valueFormat" @change="handleChange" />
  </el-form-item>
</template>

<script>
import { DateUtil } from '../../utils/dateUtil'

export default {
  name: 'DateTimeSelect',
  props: {
    modelValue: {
      type: [String, Date],
      default: null
    },
    label: {
      type: String,
      default: '时间选择'
    },
    prop: {
      type: String,
      default: 'time'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择时间'
    },
    rules: {
      type: Array,
      default: () => []
    },
    // 选择类型：date(日期), datetime(日期时间), time(时间)
    type: {
      type: String,
      default: 'date',
      validator: value => ['date', 'datetime', 'time'].includes(value)
    },
    clearable: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '400px'
    }
  },
  emits: ['update:modelValue', 'change'],

  computed: {
    // 根据选择类型设置 Element Plus 的日期选择器类型
    datePickerType() {
      switch (this.type) {
        case 'date': return 'date'
        case 'datetime': return 'datetime'
        case 'time': return 'time'
        default: return 'date'
      }
    },

    // 根据选择类型设置日期格式
    dateFormat() {
      switch (this.type) {
        case 'date': return 'YYYY-MM-DD'
        case 'datetime': return 'YYYY-MM-DD HH:mm'
        case 'time': return 'HH:mm'
        default: return 'YYYY-MM-DD'
      }
    },

    // 根据选择类型设置值的格式
    valueFormat() {
      switch (this.type) {
        case 'date': return 'YYYY-MM-DD'
        case 'datetime': return 'YYYY-MM-DD HH:mm'
        case 'time': return 'HH:mm'
        default: return 'YYYY-MM-DD'
      }
    },

    displayValue() {
      if (!this.modelValue) return ''

      let dateValue = this.modelValue;
      if (!(dateValue instanceof Date)) {
        dateValue = new Date(dateValue);
      }

      if (this.type === 'time') {
        return DateUtil.getTimeTitle(dateValue)
      } else if (this.type === 'date') {
        return DateUtil.getDayTitle(dateValue)
      }
      else {
        return DateUtil.getDateTimeTitle(dateValue)
      }

    }
  },
  watch: {
    modelValue(newVal) {

      /*

      this.selectedValue = newVal

      console.log('DateTimeSelect modelValue changed', this.selectedValue)

      // 打印 selectedValue 的类型
      if (this.selectedValue instanceof Date) {
        console.log('selectedValue is Date')
      } else if (typeof this.selectedValue === 'string' || typeof this.selectedValue === 'number') {
        console.log('selectedValue is string or number')
      } else {
        console.log('selectedValue is of unknown type')
      }
        */
      this.selectedValue = this.formatDate(newVal)
    },
    selectedValue(newVal) {
      this.$emit('update:modelValue', newVal)
    }
  },
  data() {
    return {
      selectedValue: this.modelValue
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('change', val)
    },

    // 格式化时间
    formatDate(time) {
      if (typeof time === 'string') {
        return time
      } else if (time instanceof Date) {
        return DateUtil.getFullDateTime(time)
      }
      return ''
    }
  }
}
</script>

<style scoped>
/* 只读状态下的表单项目样式 */
.readonly-form-item :deep(.el-form-item__label) {
  font-size: 13px;
  color: #909399;
}

.readonly-content {
  display: flex;
  align-items: center;
  width: 400px;
  padding: 0 10px;
  height: 40px;
  font-size: 15px;
  color: #303133;
  vertical-align: middle;
  margin-top: -5px;
}

/* 取消只读状态下的必填标记 */
.readonly-form-item :deep(.el-form-item__label::before) {
  content: none !important;
}
</style>